<template>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-row class="table-head-box">
        <el-col :span="24" class="flex flex-end input-box">
          <el-form-item label="标题:">
            <el-select v-model="search.eqParam.title_id" placeholder="请选择">
              <el-option
                clearable
                v-for="item in titleList"
                :key="item.titleId"
                :label="item.titleName"
                :value="item.titleId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchHandler"
              >查询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="petPublishList"
      border
      style="width: 100%"
      tooltip-effect="dark"
      size="mini"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="complaintId" label="订单编号">
        <template slot-scope="scope">
          {{ scope.row.orderManage.orderNumb }}
        </template>
      </el-table-column>
      <el-table-column prop="titleName" label="分类编号"> </el-table-column>
      <el-table-column prop="complaintContent" label="投诉内容">
      </el-table-column>
      <el-table-column prop="picturePath" label="投诉图片">
        <template slot-scope="scope">
          <p v-if="scope.row.picturePath && scope.row.picturePath != null">
            <span
              v-for="item in scope.row.picturePath.split(',')"
              v-bind:key="item.index"
            >
              <img
                :src="item + '?imageView2/1/w/80/h/80'"
                width="50px"
                height="50px"
              />
            </span>
          </p>
          <p v-else class="text-empty">-</p>
        </template>
      </el-table-column>
      <el-table-column prop="userId" label="投诉人"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 1">
            <i class="el-icon-question" style="color: #409eff"></i>已受理
          </div>
          <div v-if="scope.row.status == 2">
            <i class="el-icon-success" size="20" style="color: #5be15b"></i
            >已解决
          </div>
          <div v-if="scope.row.status == 3">
            <i class="el-icon-error" style="color: #f56c6c"></i>未解决
          </div>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="260">
        <template slot-scope="scope">
          <el-button
            class="el-icon-view"
            size="mini"
            @click="updateComplaintHandler(scope.$index, scope.row, 'preview')"
            >预览</el-button
          >
          <el-button
            v-if="scope.row.status == 1"
            type="primary"
            class="el-icon-warning-outline"
            size="mini"
            @click="updateHandler(scope.$index, scope.row)"
            >处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :page-count="search.size"
          :total="search.total"
          @current-change="sizeChangeHandler"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <OrderManageEdit
      :orderDialog="showPetPublishDialog"
      :popOrder="petPublish"
      @close="close"
    ></OrderManageEdit>
  </div>
</template>
<script>
import {
  complaintListUrl,
  complaintSaveUrl,
  complaintTypeListUrl,
  replaceUrlParam,
} from "@/utils/common";
import OrderManageEdit from "./complaint-order-edit";

export default {
  components: {
    OrderManageEdit,
  },
  data() {
    return {
      petPublishList: [],
      titleList: [],

      showPetPublishDialog: false,
      petPublish: null,
      search: {
        current: 1,
        size: 10,
        total: 0,
        lkParam: { userName: "" },
        eqParam: { type: 6 },
      },
    };
  },

  mounted() {
    this.loadPetPublish();
    this.loadComplaintTitle();
  },
  methods: {
    addUserHandler: function () {
      this.petPublish = {};
      this.showPetPublishDialog = true;
    },
    updateComplaintHandler: function (index, row) {
      this.petPublish = row.orderManage;
      this.showPetPublishDialog = true;
    },
    updateHandler: function (index, row) {
      row.status = 2;
      this.axios.post(complaintSaveUrl, row).then((res) => {
        if (res.data.status == "SUCCESS") {
          this.$message({
            showClose: true,
            message: "处理成功",
          });
        }
      });
    },
    closeHandler: function () {
      this.showPetPublishDialog = false;
      this.loadPetPublish();
    },
    /**
     * @description: 关闭弹框
     * @param {*}
     * @return {*}
     */
    close() {
      this.showPetPublishDialog = false;
    },
    loadComplaintTitle() {
      //加载枚举数
      this.axios
        .post(replaceUrlParam(complaintTypeListUrl, [3]))
        .then((res) => {
          this.titleList = res.data.data;
        });
    },
    loadPetPublish() {
      this.axios
        .post(complaintListUrl, this.search)
        .then((response) => {
          var data = response.data.data;
          this.petPublishList = data.records;
          this.search.total = data.total;
        })
        .catch((response) => {
          console.log("response -   " + response);
        });
    },
    sizeChangeHandler: function (value) {
      this.search.current = value;
      this.loadPetPublish();
    },
    searchHandler: function () {
      this.search.current = 1;
      this.loadPetPublish();
    },
  },
};
</script>
<style scoped>
.grid-content {
  text-align: left;
  height: 45px;
}
.text-empty {
  /* text-align: center; */
}
</style>
